<script setup lang="ts">
import {CrowdLabelInterface} from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdInterface";
import LabelFindListCrowdPanel
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/LabelFindListCrowdPanel.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  materialIdList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  campaignId: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  recSceneList: {
    type: Array as PropType<string[]>,
    default: () => ['recSceneNew'],
  },
});
const emit = defineEmits([
  "update:value",
]);
const crowd = ref<CrowdLabelInterface[]>([]);
const tabs = ref<any[]>(
    [
      {
        title: '行业偏好人群',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000627"
          }
        ],
        value: [],
      },

      {
        title: '行业优质人群',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000558"
          },
          {
            "labelId": "3000559"
          },
          {
            "labelId": "3000560"
          },
          {
            "labelId": "3000561"
          },
          {
            "labelId": "3000562"
          },
          {
            "labelId": "3000563"
          },
          {
            "labelId": "3000564"
          },
          {
            "labelId": "3000565"
          }
        ],
        value: [],
      },
      {
        title: '跨类目拉新人群',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000626"
          }
        ],
        value: [],
      },
      {
        title: '行业策略人群',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000585"
          },
          {
            "labelId": "3000586"
          },
          {
            "labelId": "3000587"
          },
          {
            "labelId": "3000588"
          },
          {
            "labelId": "3000589"
          },
          {
            "labelId": "3000590"
          },
          {
            "labelId": "3000591"
          },
          {
            "labelId": "3000592"
          },
          {
            "labelId": "3000593"
          },
          {
            "labelId": "3000594"
          },
          {
            "labelId": "3000595"
          },
          {
            "labelId": "3000596"
          },
          {
            "labelId": "3000597"
          },
          {
            "labelId": "3000598"
          },
          {
            "labelId": "3000599"
          },
          {
            "labelId": "3000600"
          },
          {
            "labelId": "3000601"
          },
          {
            "labelId": "3000602"
          },
          {
            "labelId": "3000603"
          },
          {
            "labelId": "3000604"
          },
          {
            "labelId": "3000605"
          },
          {
            "labelId": "3000606"
          },
          {
            "labelId": "3000607"
          },
          {
            "labelId": "3000608"
          },
          {
            "labelId": "3000609"
          },
          {
            "labelId": "3000610"
          },
          {
            "labelId": "3000611"
          },
          {
            "labelId": "3000612"
          },
          {
            "labelId": "3000613"
          },
          {
            "labelId": "3000614"
          },
          {
            "labelId": "3000615"
          },
          {
            "labelId": "3000616"
          },
          {
            "labelId": "3000617"
          },
          {
            "labelId": "3000618"
          },
          {
            "labelId": "3000619"
          },
          {
            "labelId": "3000620"
          }
        ],
        value: [],
      },

    ]
);
watch(() => tabs.value, (val) => {
  // 将所有tab下value合并
  let allValue:any[] = [];
  val.forEach((item: any) => {
    allValue = allValue.concat(item.value);
  });
  emit('update:value', allValue);
}, {
  deep: true,
});
</script>

<template>
  <!--{{tabs}}-->
  <a-tabs size="small" style="margin-top: -10px;" type="card">
    <a-tab-pane v-for="(tab, index) in tabs" :key="index" :tab="tab.title">
      <component :is="tab.component" :labelList="tab.labelList" :bizCode="bizCode" :materialIdList="materialIdList"
                 :campaignId="campaignId" :recSceneList="recSceneList" v-model:value="tab.value"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
